<template>
    <div class="box">
        <!-- <xgplayer ref="xgPlayerRef" /> -->
        <yjwebxgplayer ref="video"></yjwebxgplayer>
    </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import yjwebxgplayer from '@yjweb/xgplayer';
import 'xgplayer/dist/index.min.css';

console.log(yjwebxgplayer);
// import xgplayer from './components/xgplayer.vue';
// const xgPlayerRef = ref(null);
const video = ref(null);
nextTick(() => {
    // 调用子组件的init方法，传入视频URL
    // console.log(xgPlayerRef.value);
        // autoplayMuted: true,//是否自动静音自动播放，如果autoplay为false，则该属性的作用为默认静音播放
        //poster: '',//封面图地址
        //startTime: ''//初始起播时间
        // rotate: 90,//是否使用旋转插件
        //isLive: true,
        // progress: {
        // isDraggingSeek: false,
        // closeMoveSeek: true,
        // isCloseClickSeek: true
        // },
   
    //player.play()
    //player.pause()
    //player.replay()
    //player.seek(20)
    //player.reload()
    //player.setConfig({
    //     url: '另一个url',
    // })
    // xgPlayerRef.value.init('http://localhost:3001/file/1.mp4');
    video.value.init('http://localhost:3001/file/1.mp4');
});
</script>

<style>
html,
body {
    margin: 0;
}
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
}
.box {
    width: 100vw;
    height: 100vh;
}
</style>
